<!DOCTYPE >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf8" />
    <meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport" />
    <meta name="-webkit-tap-highlight" content="no" />
    <meta content="IE=10" http-equiv="x-ua-compatible" />
    <title>mvc例子</title>
    <script type="text/javascript" src="../../Qmik.all.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div style="min-width:2048px">
    <div class="box" q-ctrl="foreach">
        <p class="ftitle"> q-for循环
        <s>
            加载数据: <g>${time}</g>
            <s class="loading"></s>
        </s>
        </p>
        <ul q-for="item in list" class="hide">
            <li>
                <s class="lt name">名字: </s>
                [<s class="bind">${item.name}  ${item.info.msg}</s>]

                <s class="lt age">年龄: </s>
                [<s class="bind">${item.age}</s>]

                <s class="lt age">年龄: </s>
                [<s class="bind">${item.age}</s>]

                <s class="lt age">年龄: </s>
                [<s class="bind">${item.age}</s>]

                <s class="lt hometown">家乡: </s>
                [<s class="bind">${item.hometown}</s>]

                <s class="lt sex">性别: </s>
                [<s class="bind">${item.sex}</s>]
            </li>
        </ul>
    </div>

</div>
<script type="text/javascript">
    $(function(){
        $.app().ctrl({
            foreach: function(scope){//购物
                scope.cssDisplay="";//初始化的值需要事先声明
                scope.list = [
                    {name:"leo",age:25,hometown:'福鼎市',sex:'男', info:{msg:'haha go back'}},
                    {name:"小明",age:25,hometown:'福鼎市',sex:'男'},
                    {name:"小李",age:25,hometown:'福鼎市',sex:'男'},
                    {name:"小丽",age:25,hometown:'福鼎市',sex:'女'}
                ];//界面上用到的变量,没有输出相应的input标签,需要预定义
                scope.apply();

                var ttl = 5000;
                scope.time = parseInt(ttl/1000);
                var startTime = $.now() + ttl;
                $.cycle(function(){
                    var t = startTime - $.now();
                    scope.time = parseInt(t/1000);
                    scope.apply("time");//局部更新
                }, 990, ttl);


                $.delay(function(){
                    scope.cssDisplay="none";
                    scope.list.push({name:"小婷",age:25,hometown:'福鼎市',sex:'女'});
                    scope.apply();
                }, 5000);
            }
        });
    })
</script>
</body>
